<template>
  <div class="statusWrap" v-title="title">
    <!-- 图 -->
    <div class="imgWrap">
      <img class="working" v-if="status==0" width="150" src="./working.gif" alt="">
      <img v-if="status==1" width="218" src="./success.png" alt="">
      <img v-if="status==2" width="218" src="./fail.png" alt="">
    </div>
    <!-- 文 -->
    <div class="msgWrap">
      <div v-if="status==0">
        <p class="msg">正在打印请稍后~</p>
        <p class="tips">
          <img width="17" src="./i.png" alt=""> 请勿离开取件点</p>
      </div>
      <div v-if="status==1">
        <p class="msg">打印成功咯~</p>
        <p class="tips">
          <img width="17" src="./i.png" alt=""> 请在档案口文档领取文件</p>
      </div>
      <div v-if="status==2">
        <p class="msg">打印失败咯~</p>
        <p class="tips">
          <img width="17" src="./i.png" alt=""> 请联系管理员查看故障</p>
      </div>
    </div>
    <!-- 按钮 -->
    <div class="btnWrap">
      <a v-if="status==2" @click="goBack" href="javascirpt:;" class="btn statusBtn"> 返回首页</a>
      <a v-if="status==1" @click="goBack" href="javascirpt:;" class="btn statusBtn"> 返回首页</a>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        title: '正在打印',
        status: 0,
        count: '',
        DocNo: '',
      }
    },
    methods: {
      init() {
        let that = this
        let DocNo = sessionStorage.getItem("DocNo")
        let AllPrice = sessionStorage.getItem("AllPrice")
        if (DocNo) {
          let timer = setInterval(function () {
            axios.get(`/job/GetInfo?docNo=${DocNo}`)
              .then(res => {
                if (res.data.IsSuccess) {
                  let flag = res.data.Data.DocumentStatus
                  if (flag == 3) {   
                   clearInterval(timer)
                    axios.post(`/job/Update?docNo=${DocNo}&documentStatus=7&totalCost=${AllPrice}`).then(res => {
                        if (res.data.Data) {                   
                          that.status = 1
                        } else {
                          weui.alert(res.data.Msg)
                          that.status = 2
                        }
                      })
                      .catch(err => {
                        clearInterval(timer)
                        that.status = 2
                      })

                    clearInterval(timer)
                  }
                } else {
                  clearInterval(timer)
                }
              })
              .catch(err => {
                alert(JSON.stringify(err))
              })
          }, 500)
        }
        // }

      },
      goBack() {
        this.$router.push('/')
      }

    },
    created() {
      this.init()
    }
  }

</script>

<style lang='less' scoped>
  .statusWrap {
    padding-top: 3.546667rem;
    .imgWrap {
      text-align: center;
      margin-bottom: .533333rem;
      img {
        transform: translateX(20px);
        &.working {
          transform: none;
          margin-top: 1.066667rem;
        }
      }
    }
    .msgWrap {
      text-align: center;
      margin-bottom: 2rem;
      .msg {
        color: #19A4FF;
        font-size: 18px;
      }
      .tips {
        padding-top: 16px;
        color: #BFBFBF;
        font-size: 10px;
      }
      img {
        font-size: 0;
        vertical-align: middle;
        margin-right: 3px;
      }
    }
    .btnWrap {
      text-align: center;
      margin-bottom: 20px;
      .statusBtn {
        width: 180px;
        height: 42px;
        color: #fff;
        background: #19A4FF;
        font-size: 16px;
        line-height: 42px;
        text-decoration: none;
      }
    }
  }

</style>
